<template>
    <AutoPage @getScale="getScale" title="争先创优赛道">
        <div class="content-box">
            <div class="grid-col-flex">
                <div>
                    <Card title="获奖论文">
                        <WinPager />
                    </Card>
                </div>
                <div class="flex-1">
                    <Card title="典型案事例">
                        <CaseExample />
                    </Card>
                </div>
            </div>
            <div class="grid-col-flex">
                <div>
                    <Card title="荣誉">
                        <Honor />
                    </Card>
                </div>
                <div class="flex-1">
                    <PublishArticle />
                </div>
                <div class="flex-1">
                    <Card title="双优">
                        <DoubleExcellence />
                    </Card>
                </div>
            </div>
            <div class="grid-col-flex">
                <div>
                    <Card title="近三年宣传发稿情况">
                        <PromoteArticles />
                    </Card>
                </div>
                <div class="flex-1">
                    <Card title="精品宣传成果" :more="true" @clickMore="clickMore">
                        <PromotionSuccessful />
                    </Card>
                </div>
                <div class="last">
                    <Card title="经纬演播厅" :more="true" @clickMore="clickMore">
                        <TelevisionStudio />
                    </Card>
                </div>
            </div>
        </div>
        <PopModal ref="pop" />
    </AutoPage>
</template>

<script>
import Card from '@/components/Card.vue'
import AutoPage from "@/components/AutoPage.vue";
import WinPager from './charts/win-paper.vue'
import CaseExample from './charts/case-example.vue'
import Honor from './charts/honor-page.vue'
import DoubleExcellence from './charts/double-excellence.vue'
import PromoteArticles from './charts/promote-articles.vue'
import PublishArticle from './charts/publish-article.vue'
import PromotionSuccessful from './charts/promotion-successful.vue'
import TelevisionStudio from './charts/television-studio.vue'
import PopModal from './pop-modal.vue'

export default {
    name: 'QualityEfficiency',
    components: {
        Card, AutoPage, WinPager, PublishArticle, PromotionSuccessful, CaseExample, Honor, DoubleExcellence, PromoteArticles, TelevisionStudio, PopModal
    },
    data() {
        return {
            scale: 1
        }
    },
    methods: {
        getScale(e) {
            this.scale = e;
        },
        clickMore() {
            this.$refs.pop.dialogVisible = true
        }
    }
}
</script>

<style lang="less" scoped>
.content-box {
    flex: 1;
    width: 100%;
    padding: 0 35px 38px;
    display: flex;
    margin: 46px 0 0;
    gap: 30px;

    .grid-col-flex {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 15px;
        flex-shrink: 0;
        overflow: hidden;

        &>div:first-child {
            box-sizing: content-box;
            height: 300px;
        }

        .flex-1 {
            flex: 1;
        }

        .last {
            height: 200px;
        }
    }
}
</style>